<template>
  <div style="width: 100%; height: 500px; background-color: azure">
    <div id="chart" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { ElMessage } from 'element-plus'
import { ref, onMounted, defineProps, defineExpose } from 'vue'
import axios from 'axios'
const props = defineProps(['search'])
const wordList = ref([])
const initchart = () => {
  const myChart = echarts.init(document.querySelector('#chart'))
  function eConsole(param) {
    sessionStorage.setItem('movieInfo', JSON.stringify(param.data.name))
  }
  myChart.on('click', eConsole)
  myChart.setOption({
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'wordCloud',
        // 用来调整词之间的距离
        gridSize: 10,
        // 用来调整字的大小范围
        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.
        sizeRange: [14, 60],
        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
        // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
        rotationRange: [-45, 0, 45, 90],
        // rotationRange: [ 0,90],
        // rotationRange: [0, 0],
        shape: 'circle',
        drawOutOfBound: false,
        // vb      l/随机生成字体颜色
        // maskImage: maskImage,
        textStyle: {
          color: function () {
            return (
              'rgb(' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ')'
            )
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333'
            }
          }
        },
        // 位置相关设置
        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        width: '200%',
        height: '200%',
        // 数据
        data: wordList.value
      }
    ]
  })
}

function getData() {
  axios
    .get('/api/suggest/getSuggestByUid' + '/' + parseInt(props.search))
    .then((res) => {
      wordList.value = res.data
      initchart()
    })
    .catch(() => {
      ElMessage.warning('未查找到该用户！')
    })
}

defineExpose({
  getData
})

onMounted(() => {
  getData()
})
</script>

<style scoped>
.modify {
  width: 70px;
  height: 35px;
  background: #38f9d7;
  color: white;
  border: none;
  border-radius: 5px;
  margin-left: 10px;
}
</style>
